<template>
  <div class="order-back-main">
    <el-card shadow="never">
      <div slot="header">
        <span>搜索栏</span>
      </div>
      <!-- card body -->
    </el-card>
    <el-card shadow="never" style="margin: 30px;">
      <div slot="header">
        <span>退单列表</span>
      </div>
      <el-table :data="returnApplyList" border stripe>
        <el-table-column
          type="index"
          label="#"
          :width="50"
        />
        <el-table-column
          prop="orderSn"
          label="订单编号"
          :width="200"
        />
        <el-table-column
          prop="status"
          label="订单状态"
          :width="200"
        >
          <!-- 申请状态：0->待处理；1->退货中；2->已完成；3->已拒绝 -->
          <template slot-scope="scope">
            <p v-if="scope.row.status === 0">待处理</p>
            <p v-if="scope.row.status === 1">已同意,退货中</p>
            <p v-if="scope.row.status === 2">已完成退款</p>
            <p v-if="scope.row.status === 3">拒绝退货</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="退单描述"
          :width="200"
        />
        <el-table-column
          prop="reason"
          label="退单原因"
          :width="100"
        />
        <el-table-column
          prop="productName"
          label="商品名称"
          :width="100"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          :width="100"
        />
        <el-table-column
          label="操作"
          :width="200"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="goDetail(scope.row.id)">退单明细</el-button>

          </template>
        </el-table-column>
      </el-table>

    </el-card>

  </div>
</template>

<script>
import { findReturnApply as findReturnApplyApi } from '@/api/order/orderBack'
export default {
  name: 'OrderBack',
  components: {

  },
  data() {
    return {
      returnApplyList: [] // 退单列表对象
    }
  },
  computed: {

  },
  created() {
    // 获取所有退单列表
    this.findReturnApply()
  },
  mounted() {

  },
  methods: {
    findReturnApply() {
      // 模拟分页 写死了
      findReturnApplyApi(1, 10)
        .then(res => {
          const { success, data, message: errMsg } = res
          if (success) {
            const { rows } = data
            // 赋值
            this.returnApplyList = rows
          } else {
            this.$message.error(errMsg)
          }
        })
    },
    goDetail(id) {
      this.$router.push({ name: 'orderBackDetail', params: { id }})
    }
  }
}
</script>

<style scoped lang="scss">
  .order-back-main{

  }
</style>
